<template>
  <div class="cmp-result-box">
    <h2>结果如下</h2>

    <CmpResultTable
      title="A 中重复的行"
      :column-map="columnDup"
      :data="showDupA"
    />
    <CmpResultTable
      title="B 中重复的行"
      :column-map="columnDup"
      :data="showDupB"
    />
    <CmpResultTable
      title="与 A 相比, B 缺失的行"
      :column-map="columnLostAdd"
      :data="showLost"
    />
    <CmpResultTable
      title="与 A 相比, B 增加的行"
      :column-map="columnLostAdd"
      :data="showAdd"
    />
    <CmpResultTable
      title="与 A 相比, B 不一致的行"
      :column-map="columnDiff"
      :data="showDiff"
    />

    <div class="end">以上.</div>
  </div>
</template>

<script>
import CmpResultTable from './CmpResultTable'

export default {
  name: 'CmpResultBox',
  components: {
    CmpResultTable,
  },
  props: {
    data: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      columnDup: {
        name: '名称',
        index: '行号',
      },
      columnLostAdd: {
        name: '名称',
        index: '行号',
      },
      columnDiff: {
        name: '名称',
        label: '标签',
        valueA: '值 A',
        valueB: '值 B',
        indexA: '行号 A',
        columnA: '列 A',
        indexB: '行号 B',
        columnB: '列 B',
      },
    }
  },
  computed: {
    showDupA() {
      return this.data.dupA.map(i => ({
        name: i.name,
        index: i.index,
      }))
    },
    showDupB() {
      return this.data.dupB.map(i => ({
        name: i.name,
        index: i.index,
      }))
    },
    showLost() {
      return this.data.lost.map(i => ({
        name: i.name,
        index: i.index,
      }))
    },
    showAdd() {
      return this.data.add.map(i => ({
        name: i.name,
        index: i.index,
      }))
    },
    showDiff() {
      return this.data.diff.map(i => ({
        name: i.name,
        label: i.label,
        columnA: i.columnA,
        columnB: i.columnB,
        indexA: i.a.index,
        indexB: i.b.index,
        valueA: i.a.raw[i.columnA],
        valueB: i.b.raw[i.columnB],
      }))
    },
  },
}
</script>

<style scoped lang="scss">
.end {
  margin-top: 1em;
}
</style>
